<template>
	<div class="personnelList">
		<el-breadcrumb separator="/" class="ml_5">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-huodong1 fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>活动管理</el-breadcrumb-item>
			<el-breadcrumb-item>拉新活动管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<div style="min-height: 40px;"></div>
					</el-col>
					<el-col :span="20"> </el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="newActivitiesList" stripe>
						<el-table-column prop="id" label="序号" align="center" width="50px">
							<template slot-scope="{ row, $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="活动名称" align="center"></el-table-column>
						<el-table-column prop="status" label="活动状态" align="center" width="120px">
							<template slot-scope="{ row, $index }">
								<span v-if="row.status == '1'">未开始</span>
								<span class="text-success" v-if="row.status == '2'">进行中</span>
								<span class="text-danger" v-if="row.status == '3'">已结束</span>
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="活动起止时间" align="center" width="300px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.time_start }}至{{ row.time_end }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="participants_num" label="参与人数" align="center" width="100px">
							<template slot-scope="{ row, $index }">
								<span style="font-weight: 800;">{{ row.participants_num }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="创建人" width="120px" align="center"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" width="160px" align="center"></el-table-column>

						<el-table-column label="操作" width="180px" fixed="right">
							<template slot-scope="{ row, $index }">
								<el-link
									type="primary"
									class="InfoFont text-success"
									:underline="false"
									@click="redactBtn(row, $index)"
									v-if="row.type != 5"
									>导出数据</el-link
								>

								<div v-if="row.type == 5">
									<el-link size="mini" class="InfoFont" :underline="false" type="primary" @click="toUrl(row, 'export')"
										>汇总</el-link
									>
									<el-link
										size="mini"
										class="InfoFont"
										:underline="false"
										type="success"
										@click="toUrl(row, 'getRedPackByUser')"
										>红包</el-link
									>
									<el-link
										size="mini"
										class="InfoFont"
										:underline="false"
										type="info"
										@click="toUrl(row, 'getRedPackByActivityUser')"
										>按人</el-link
									>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'
export default {
	name: 'newActivities',
	data() {
		return {
			ids: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			newActivitiesList: [], //活动列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: ''
		}
	},
	created() {},
	mounted() {},
	methods: {
		//教程-列表
		listShop() {
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('type', '1,4,5') //1 拉新活动  2出工活动 4 平台激励 5 海报红包

			this.$http.post(this.url + '/activity/getList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data.list != null) {
							this.newActivitiesList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.newActivitiesList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		redactBtn(row) {
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				activity_id: row.id,
				type: row.type
			}
			let param = $.param(obj)
			window.location.href = this.url + '/activity/export?' + param
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		},

		toUrl(row, key) {
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				activity_id: row.id,
				type: row.type
			}
			let param = $.param(obj)
			window.location.href = this.url + '/activity/' + key + '?' + param
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/activities/NewActivities.vue